<template>
  <el-main style="padding: 20px">
    <el-upload
        class="upload-demo"
        :action="url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :http-request="uploadFile"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :file-list="fileList"
      >
        <el-button size="small" type="primary"
          >导入习题(请导入.xlsx文件，编码为utf-8)</el-button
        >
      </el-upload>
      <el-button
      size="small"
      @click="addTimu"
      type="primary"
      style="display: block; margin-bottom: 10px;margin-top:10px"
      >添加习题（带有图片或视频）</el-button
    ></el-button>

      <!-- 添加习题 带视频图片的 -->
    <el-dialog
      title="添加习题"
      style="padding: 0px"
      :close-on-click-modal="false"
      :visible.sync="xiti"
    >
      <el-form
        :model="xitiData"
        :rules="xitirules"
        ref="addxitiData"
        style="margin: 0px; padding: 0px"
      >
        <el-form-item label="题目:" prop="timu">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.content"
            size="mini"
            placeholder="请输入题目"
          ></el-input>
        </el-form-item>

        <el-form-item label="题目图片" prop="img">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/file/upload"
            name="fileData"
            :on-success="handleAvatarSuccess1"
          >
            <img v-if="xitiData.imgUrl" :src="xitiData.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="题目视频" prop="video">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/file/upload"
            name="fileData"
            :on-success="handleAvatarSuccess2"
          >
            <video
              v-if="xitiData.fileUrl"
              height="300px"
              preload="auto"
              controls=""
              :src="xitiData.fileUrl"
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="答案解析:" prop="analysis">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.analysis"
            size="mini"
            placeholder="请输入答案解析"
          ></el-input>
        </el-form-item>

        <el-form-item label="答案:" prop="answer">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.answer"
            size="mini"
            placeholder="请输入答案"
          ></el-input>
        </el-form-item>

        <el-form-item label="选项:" prop="item">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.item"
            size="mini"
            placeholder="非必填项，判断题和选择题得多项用 - 隔开"
          ></el-input>
        </el-form-item>

        <el-form-item label="难度:" prop="item">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.level"
            size="mini"
            placeholder="从1到3，数字越大难度越高"
          ></el-input>
        </el-form-item>


        <!-- <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select> -->

        <el-form-item>
          <el-button size="mini" @click="cancelEidt">取 消</el-button>
          <el-button size="mini" type="primary" @click="addxiti('addxitiData')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="tianjia" width="80%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="题目"
          ><el-input v-model="form.content" placeholder="about"></el-input
        ></el-form-item>
        <el-form-item label="答案解析"
          ><el-input type="textarea" v-model="form.analysis"></el-input
        ></el-form-item>
        <el-form-item label="答案"
          ><el-input type="textarea" v-model="form.answer"></el-input
        ></el-form-item>
        <el-form-item label="选项"
          ><el-input
            type="textarea"
            v-model="form.item"
            placeholder="非必填,判断题和选择题的多选项用 - 隔开"
          ></el-input
        ></el-form-item>
        <!-- <el-form-item label="类型">
          <el-radio-group v-model="setradio" style="margin-top: 20px">
            <el-radio
              :label="item.categoryCode"
              v-for="(item, index) in typeList"
              :key="index"
              >{{ item.categoryName }}</el-radio
            >
          </el-radio-group>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="tianjia = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="table-box">
      <el-table :data="content" style="width: 100%">
        <el-table-column prop="content" label="题目"></el-table-column>
        <el-table-column prop="item" label="选择"></el-table-column>
        <el-table-column prop="answer" label="答案"></el-table-column>
        <el-table-column prop="analysis" label="解析"></el-table-column>

    <el-table-column label="操作">
         <template slot-scope="scope">       <el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>
    
            <el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
          </template>
        </el-table-column> 
      </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :page-count="data.pages"
        :current-page="current"
        @current-change="chaxun"
      ></el-pagination>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      content: [],
      id: "",
      tianjia: false,
      form: {},
      chapid:'',
      page:1,
      size:10,
      current:1,
      setradio: "",
         xitiData: {
           shid:'',
        content: "",
        imgUrl: "",
        fileUrl: "",
        typeId:'',
        analysis: "",
        answer: "",
        fileList:[],
        item: [],
        type: '',
        level: "",
        chapterId: "",
      },
        typeList: [],
        xitirules: {
        content: [{ required: true, message: "必填:题目", trigger: "blur" }],
        answer: [{ required: true, message: "必填:答案", trigger: "blur" }],
      },
      xiti:false,
      leimuid:'',
    };
  },
  mounted: function () {
    this.id = this.$route.query.id;
    this.chapid= this.$route.query.chaperId
    this.leimuid= this.$route.query.leimuid
    this.getData();
    //console.log(this.id);
  },
   watch: {
    radio() {
      this.page = 1;
      this.addWord();
    },
  },
   inject: ["reload"],
  methods: {
         chaxun(val) {
      //console.log(val);
      this.page = val;
     this.getData();
    },
        handlePreview(file) {
      //console.log(file);
    },
        handleRemove(file, fileList) {
      //console.log(file, fileList);
    },   //上传
     uploadFile(param){
       //console.log("开始上传")
         var fileObj = param.file;
        var form = new FormData();   //在创建FormData对象时指定表单的元素  我们需要传的参数
        form.append("file", param.file);
        form.append("shid",this.id)
       this.uploadFileRequest('/back/practicestores/importPractice/0',form).then(res => {
         //console.log(res)
         if(res.data.code == 10000){
           this.$message({
             type:'success',
             message:"上传成功"
           })
           this.reload();
         } 
       })
     },
        beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
        async addxiti(e) {

      let nowitem =  this.xitiData.item.split('-')
      this.xitiData.shid = this.id
      this.xitiData.typeId=0;
      this.xitiData.type=1;
      this.xitiData.item = nowitem
      const data = await this.postJson("/back/practicestores/addPractice", this.xitiData);
      //console.log(data.data.status);
      if (data.data.status == "success") {
                  this.reload();

        this.$message(data.data.msg);
        this.cancelEidt();
      }
      //console.log(data);
      //console.log(this.xitiData);
      //console.log(this.$refs[e]);
    },
        cancelEidt() {
      this.xiti = false;
    },
    handleAvatarSuccess1(res, file) {
      this.xitiData.imgUrl = res.url;
      //console.log(this.xitiData.imgUrl);
    },
    handleAvatarSuccess2(res, file) {
      this.xitiData.fileUrl = res.url;
      //console.log(this.xitiData.fileUrl);
    },
       // 添加题目
    addTimu() {
      //console.log("ok");
      this.xiti = true;
    },
      onSubmit() {
      //console.log(this.form);
      // if (this.form.item != null) {
      //   this.form.item = this.form.item.split("-");
      // }
      // isArray(item.item)
      this.postJson(
        "/back/practicestores/updatePractice?id=" + this.form.practiceId,
        this.form
      ).then((res) => {
        //console.log(res);
        this.$message(res.data.msg);
              this.tianjia = false;

      });
    },
    setbianji(e) {
      this.form = e;
      this.setradio = this.form.type;
      this.tianjia = true;
    },
      deleteObj(e) {
         let arr =[]
          var obj ={
            unitId:+this.id,
            psId:e.practiceId
         }
         arr.push(obj)
        
      this.postJson("back/practicestores/deletePractice?ids="+e.practiceId).then(
        (res) => {
          //console.log(res);
          this.reload();
          this.$message(res.data.msg);
        }
      );
    },
    getData() {
       let params = {
          page: this.page,
          size: this.size,
          shid:this.id,
          typeId:0,
      };
      this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
        //console.log(111,res)
        this.data = res.data.data;
        this.content = res.data.data.list
        let arr = res.data.data.content;
        for (let item in arr) {
          //console.log(arr[item]);
          for (let value in arr[item]) {
            //console.log(arr[item][value]);
            let list = arr[item][value];

            this.content.push(arr[item][value]);
          }
        }
        //console.log(this.content);
      });
      // this.postJson(`/back/unit/getById`, { unitId: this.id }).then((res) => {
      //   this.data = res.data.data;
      //   let arr = res.data.data.content;
      //   for (let item in arr) {
      //     //console.log(arr[item]);
      //     for (let value in arr[item]) {
      //       //console.log(arr[item][value]);
      //       let list = arr[item][value];

      //       this.content.push(arr[item][value]);
      //     }
      //   }
      //   //console.log(this.content);
      // });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
